<!DOCTYPE html>
<html lang="en">
<link>

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Spu_Sku_List管理</title>
    <meta name="description" content="Spu_Sku_List管理">
    <meta name="keywords" content="Spu_Sku_List管理">
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">

    <!-- 引入样式/组件 -->
    <link rel="icon" href="../img/favicon.ico">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../css/elementui.css"/>
    <script src="../js/vue.js"></script>
    <script src="../js/elementui.js"></script>
    <script src="../js/axios.js"></script>
    <script src="../js/util.js"></script>

<body class="hold-transition">

<div id="app">

    <div class="content-header">
        <h1>Spu_Sku_List管理<small>Spu_Sku_List管理</small></h1>
        <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>Spu_Sku_List管理</el-breadcrumb-item>
            <el-breadcrumb-item>Spu_Sku_List管理</el-breadcrumb-item>
        </el-breadcrumb>
    </div>

    <div class="app-container">
        <div class="box">
            <div class="filter-container">
            <!--查询表单-->
            <el-form :inline="true">
                <el-form-item label="商品名称">
                    <el-input v-model="searchMap.name" placeholder="商品名称" class="filter-item">
                    </el-input>
                </el-form-item>
                <el-button type="primary" @click="findPage()">查询</el-button>
                <el-button type="primary" class="butT" onclick="location.href = 'spu_sku_add.html'">添加商品</el-button>
                <el-button type="primary" @click="auditMany()">批量审核通过</el-button>
                <el-button type="primary" @click="putMany()">批量上架商品</el-button>
                <el-button type="primary" @click="pullMany()">批量下架商品</el-button>
            </el-form>
            </div>

            <el-table :data="tableData"
                      style="width:100%"
                      @selection-change="handleSelectionChange">
                <el-table-column
                        type="selection"
                        width="55">
                </el-table-column>
                <el-table-column
                                        prop="id"
                                        label="ID"
                                        width="180">
                </el-table-column>
                <el-table-column
                                        prop="name"
                                        label="商品名称"
                                        width="180">
                </el-table-column>
                <el-table-column
                                        prop="isDelete"
                                        label="是否删除"
                                        width="180">
                </el-table-column>
                <el-table-column
                                        prop="isMarketable"
                                        label="商品上下架"
                                        width="180">
                </el-table-column>
                <el-table-column
                                        prop="status"
                                        label="商品审核"
                                        width="180">
                </el-table-column>
                <el-table-column

                                        label="设置"
                                        width="180">

                    <template slot-scope="scope">
                        <!--<el-button @click="detail(scope.row.id)" type="primary" size="small">查看详情</el-button>-->
                        <el-button @click="audit(scope.row.id,1)"
                                   type="primary" size="small">审核通过</el-button>
                        <el-button @click="audit(scope.row.id,0)"
                                   type="primary" size="small">审核不通过</el-button>
                        <el-button @click="pull(scope.row.id)"
                                   type="primary" size="small">下架商品</el-button>
                        <el-button @click="put(scope.row.id)"
                                   type="primary" size="small">上架商品</el-button>
                    </template>

                </el-table-column>
                <el-table-column

                                        label="操作"
                                        width="180">

                    <template slot-scope="scope">
                        <el-button @click="del1(scope.row.id)" size="mini" type="primary" size="small">逻辑删除</el-button>
                        <el-button @click="del2(scope.row.id)" size="mini" type="primary" size="small">物理删除</el-button>
                        <el-button @click="del3(scope.row.id)" size="mini" type="primary" size="small">还原逻辑删除</el-button>
                    </template>

                </el-table-column>
            </el-table>

            <div class="pagination-container">
                <el-pagination @size-change="findPage"
                               @current-change="findPage"
                               :current-page.sync="currentPage"
                               :page-sizes="[10,30,50,100]"
                               :page-size="size"
                               layout="total,sizes,prev,pager,next,jumper"
                               :total="total">
                 </el-pagination>
            </div>

        </div>
    </div>
</div>

<script>

    var id = getQueryString("sid");

    new Vue({
        el: "#app",
        data:{
            tableData:[],
            currentPage:1,
            size:10,
            total:10,
            searchMap:{},
            ids:[]
        },
        created(){
            this.findPage();
        },
        methods:{
            // detail(id){
            //     location.href = "spu_sku_detail.html?sid="+id;
            // },
            findPage(){
                axios.post(`/spu/findPage.do?page=${this.currentPage}&&size=${this.size}`,this.searchMap).then( res=>{
                        this.tableData = res.data.rows;
                        this.total = res.data.total;
                })
            },
            auditMany(){
                axios.post('/spu/auditMany.do',this.ids).then( res=>{
                    alert("成功");
                    this.findPage();
                })
            },
            putMany(){
                axios.post(`/spu/putMany.do`,this.ids).then(
                    res => {
                        alert("成功！！！");
                        this.findPage();
                    }
                )
            },
            pullMany(){
                axios.post(`/spu/pullMany.do`,this.ids).then(
                    res => {
                        alert("成功！！！");
                        this.findPage();
                    }
                )
            },
            // val 表示选中行的数据
            handleSelectionChange(val){
                // 方法一(商品批量审核通过): 集合和Map
                // this.ids = val;
                // console.log(this.ids);
                // 方法二(商品批量审核通过): 数组
                var id = []; // 1:val直接赋值
                for(var i=0;i<val.length;i++){
                    id.push(val[i].id); // 前者id是自定义,后者id是主键
                }
                this.ids = id; // 2:循环取出val中id,组成新的数组赋值给ids
                console.log(this.ids);
            },
            pull(id){ // 不带@RequestBody
                axios.get(`/spu/pull.do?id=${id}`).then(
                    res => {
                        alert("成功！！！");
                        this.findPage();
                    }
                )
            },
            put(id){ // 不带@RequestBody
                axios.get(`/spu/put.do?id=${id}`).then(
                    res => {
                        if(res.data.code == 0){
                            alert("成功！！！");
                            this.findPage();
                        }else{
                            alert("未通过审核");
                        }
                    }
                )
            },
            audit(id,status){ // 不带@RequestBody
                // 根据ID查询记录 回显
                axios.get(`/spu/audit.do?id=${id}&status=${status}`).then(
                    res => {
                        alert("成功！！！");
                        this.findPage();
                    }
                )
            },
            del1(id){ // 不带@RequestBody
                this.$confirm('确定要逻辑删除此记录吗?','提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(
                    () => {
                        axios.get(`/spu/deleteGoods.do?id=${id}`).then(
                            res => {
                                alert("成功！！！");
                                this.findPage();
                            }
                        )
                    }
                )
            },
            del2(id){ // 不带@RequestBody
                this.$confirm('确定要物理删除此记录吗?','提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(
                    () => {
                        axios.get(`/spu/removeGoods.do?id=${id}`).then(
                            res => {
                                alert("成功！！！");
                                this.findPage();
                            }
                        )
                    }
                )
            },
            del3(id){ // 不带@RequestBody
                this.$confirm('确定要还原逻辑删除商品此记录吗?','提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(
                    () => {
                        axios.get(`/spu/revertGoods.do?id=${id}`).then(
                            res => {
                                alert("成功！！！");
                                this.findPage();
                            }
                        )
                    }
                )
            }
        }
    })
</script>

</body>
</html>